<template>
  <div style="height:100%;">
    <div v-transfer-dom>
      <loading v-model="isLoading"></loading>
    </div>
    <div v-transfer-dom>
      <actionsheet :menus="menus" v-model="showMenu" @on-click-menu="changeLocale"></actionsheet>
    </div>
    <!-- <h1>sdfsdfsdf</h1> -->
    <!-- <h1>sdfsdfsdf</h1> -->
    <!-- <h1>sdfsdfsdf</h1> -->
    <!-- {{showTabb}} -->
    <view-box ref="viewBox" v-if="$device.isWechat" style="padding-top:0px"    body-padding-bottom="55px">
    <!-- <view&#45;box ref="viewBox" v&#45;bind:class="{ $device: isActiving }"     body&#45;padding&#45;bottom="55px"> -->
    <!-- <view&#45;box ref="viewBox"  v&#45;bind:style="[$device ? {paddingTop:0} : {paddingTop:46}]"     body&#45;padding&#45;bottom="55px"> -->
      <x-header slot="header" v-if="!$device.isWechat"
      style="width:100%;position:absolute;left:0;top:0;z-index:100;"
      :left-options="leftOptions"
      :right-options="rightOptions"
      :title="title"
      :transition="headerTransition"
      @on-click-more="onClickMore"></x-header>
      <!-- <transition :name="'vux&#45;pop&#45;' + (direction === 'forward' ? 'in' : 'out')"> -->

        <router-view class="router-view"></router-view>
        <!-- trans wh code -->
      <!-- </transition> -->
      <tabbar class="vux-demo-tabbar" icon-class="vux-center" v-if="showTabb" v-show="!isTabbarDemo" slot="bottom">
        <tabbar-item :link="{path:'/KeClassifyList'}" :selected="route.path === '/project/donate'" >
          <span slot="icon">
            <img src="./assets/my_0605_nor@3x.png" alt="">
          </span>
          <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item :link="{path:'/OneIndex'}" :selected="route.path === '/project/donate'" >
          <span slot="icon">
            <img src="./assets/icon_Mall_nor@2x.png" alt="">
          </span>
          <span slot="label">夺宝</span>
        </tabbar-item>
        <tabbar-item :link="{path:'/trade'}" :selected="route.path === '/project/donate'" >
          <span slot="icon">
            <img src="./assets/icon_Mall_Shop_sel@2x.png" alt="">
          </span>
          <span slot="label">商城</span>
        </tabbar-item>
        <tabbar-item :link="{path:'/profile'}" :selected="route.path === '/project/donate'" >
          <span slot="icon">
            <img src="./assets/icon_my_nor@3x.png" alt="">
          </span>
          <span slot="label">个人中心</span>
        </tabbar-item>
      </tabbar>
  </view-box>
    <view-box ref="viewBox"  v-else style="padding-top:0"   body-padding-bottom="55px">
    <!-- <view&#45;box ref="viewBox" v&#45;bind:class="{ $device: isActiving }"     body&#45;padding&#45;bottom="55px"> -->
    <!-- <view&#45;box ref="viewBox"  v&#45;bind:style="[$device ? {paddingTop:0} : {paddingTop:46}]"     body&#45;padding&#45;bottom="55px"> -->
      <x-header slot="header" v-if="!$device.isWechat"
      style="width:100%;position:absolute;left:0;top:0;z-index:100;"
      :left-options="leftOptions"
      :right-options="rightOptions"
      :title="title"
      :transition="headerTransition"
      @on-click-more="onClickMore"></x-header>

    <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
      <!-- <transition :name="'vux&#45;pop&#45;' + (direction === 'forward' ? 'in' : 'out')"> -->
        <router-view class="router-view"></router-view>
        <!-- trans wh code -->
      <!-- </transition> -->
      <tabbar class="vux-demo-tabbar" icon-class="vux-center" v-if="showTabb"  slot="bottom">
        <tabbar-item :link="{path:'/KeClassifyList'}" :selected="route.path === '/project/donate'" >
          <span slot="icon">
            <img src="./assets/my_0605_nor@3x.png" alt="">
          </span>
          <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item :link="{path:'/OneIndex'}" :selected="route.path === '/project/donate'" >
          <span slot="icon">
            <img src="./assets/icon_Mall_nor@2x.png" alt="">
          </span>
          <span slot="label">夺宝</span>
        </tabbar-item>
        <tabbar-item :link="{path:'/trade'}" :selected="route.path === '/project/donate'" >
          <span slot="icon">
            <img src="./assets/icon_Mall_Shop_sel@2x.png" alt="">
          </span>
          <span slot="label">商城</span>
        </tabbar-item>
        <tabbar-item :link="{path:'/profile'}" :selected="route.path === '/project/donate'" >
          <span slot="icon">
            <img src="./assets/icon_my_nor@3x.png" alt="">
          </span>
          <span slot="label">个人中心</span>
        </tabbar-item>
      </tabbar>
  </view-box>
  </div>
</template>

<script>

import Vue from 'vue'
import { Actionsheet, ButtonTab, ButtonTabItem, ViewBox, XHeader, Tabbar, TabbarItem, Loading, TransferDom } from 'vux'
import { mapState, mapActions } from 'vuex'
import sha1 from 'js-sha1'
export default {
  data () {
    return {
      a:true,
      headerPadding:"46",
      wechat:false
    }
  },
  directives: {
    TransferDom
  },
  components: {
    ButtonTab,
    ButtonTabItem,
    ViewBox,
    XHeader,
    Tabbar,
    TabbarItem,
    Loading,
    Actionsheet
  },
  methods: {

  iswechat(){
    if (this.$device.isWechat==true) {
      this.headerPadding = "0"
      this.wechat = true

    } else {
      this.headerPadding = "46"
      this.wechat = false
    }
  },
    loginedredir(a){
      this.router.push(a)
    },
    sss (){

      var xx = sha1('中文');
      console.log(xx)
    },
    onClickMore () {
      this.showMenu = true
      var xx = sha1('中文');
      console.log(xx,sha1)
      this.$router.push('/setting')
    },
    changeLocale (locale){
      this.$i18n.set(locale)
      this.$locale.set(locale)
    },
    ...mapActions([
      'updateDemoPosition'
    ])
  },
  mounted () {

    this.showTabb = true
    this.$nextTick(function(){ //()=>{
      this.iswechat()
      console.info(343432222224);
      // this.$on('killtabbb',() => {
      //   alert(33444)
      // })
// var e = this

    console.info(this.$vux);
    console.info(Event);
    console.info(this.$device);
   console.info(this.$vux.device)
var loginState = window.localStorage.getItem("login_state")
console.info(loginState,"loginiiiiiiiiiiiiiiiiiiiiiiiisavestate");
if (loginState) {

   // this.all_islogoined= true;
  this.$store.commit('is_logined',true)
  console.info(this.all_islogoined,"  logined state");
}
      var showxd = function() {
               this.showTabb = true
      }.bind(this)
      var xd = function() {
        // if(this.all_islogoined == "false"){
        //   this.$router.push('/login')
        // }
        //
               this.showTabb = false
      }.bind(this)

        Event.listen('showingtabb',() => {
          showxd()
        })
        Event.listen('killtabb',() => {
          xd()
        })
    })

    this.handler = () => {
      if (this.path === '/demo') {
        this.box = document.querySelector('#demo_list_box')
        this.updateDemoPosition(this.box.scrollTop)
      }
    }
  },
  beforeDestroy () {
    this.box.removeEventListener('scroll', this.handler, false)
  },
  watch: {
    path (path) {
      if (path === '/component/demo') {
        this.$router.replace('/demo')
        return
      }
      if (path === '/demo') {
        setTimeout(() => {
          this.box = document.querySelector('#demo_list_box')
          this.box.removeEventListener('scroll', this.handler, false)
          this.box.addEventListener('scroll', this.handler, false)
        }, 1000)
      } else {
        this.box && this.box.removeEventListener('scroll', this.handler, false)
      }
    }
  },
  computed: {
            all_islogoined () {
                        return this.$store.getters.all_islogoined
                      },
    ...mapState({
      route: state => state.route,
      path: state => state.route.path,
      deviceready: state => state.app.deviceready,
      demoTop: state => state.vux.demoScrollTop,
      isLoading: state => state.vux.isLoading,
      direction: state => state.vux.direction
    }),
    isShowBar () {
      if (/component/.test(this.path)) {
        return true
      }
      return false
    },
    leftOptions () {
      return {
        showBack: this.route.path !== '/'
      }
    },
    rightOptions () {
      return {
        showMore: true
      }
    },
    headerTransition () {
      return this.direction === 'forward' ? 'vux-header-fade-in-right' : 'vux-header-fade-in-left'
    },
    componentName () {
      if (this.route.path) {
        const parts = this.route.path.split('/')
        if (/component/.test(this.route.path) && parts[2]) return parts[2]
      }
    },
    isDemo () {
      return /component|demo/.test(this.route.path)
    },
    isTabbarDemo () {
      // if(this.route.path ==='/OneIndex'){
        // alert(34)
        // console.info(this.isTabbarDemo);
        // Event.listen('killtabb',(e) => {
          // this.isTabbarDemo = true
    // return false
    //       console.log(this.isTabbarDemo)
    //
    //       alert(this.isTabbarDemo);
    //     })
    //   } else {
    //
      // }
      return /tabbar/.test(this.route.path)

    },
    title () {
      // if (this.route.path === '/') return '卡'
      // if (this.route.path === '/project/donate') return 'Donate'
      // if (this.route.path === '/project/donata') return 'Donata'
      // if (this.route.path === '/login') return '登陆'
      // if (this.route.path === '/shopPay') return '购卡'
      // if (this.route.path === '/trade') return '商户主页'
      // if (this.route.path === '/trade') return 'Trade'
      // if (this.route.path === '/vertify') return '实名认证'
      // if (this.route.path === '/passing') return '商户主页'
      // if (this.route.path === '/demo') return '卡城'
      // return this.componentName ? `Demo/${this.componentName}` : '详情'
    }
  },
  data () {
    return {
      showMenu: false,
      showTabb:true,
      menus: {
        'language.noop': '<router-link to="/">About</router-link>     <span class="menu-title" :link="/">添加新卡</span>'
        // 'zh-CN': '中文',
        // 'en': 'English'
      }
    }
  }
}
</script>

<style lang="less">
.isActiving {
  padding-top:46px
}
.isnotwe {
  padding-top:1000px
}
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/tap.less';
.vux-header {
  background-color: @headerBg!important;
}
body {
  background-color: #fbf9fe;
}
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.demo-icon-22 {
  font-family: 'vux-demo';
  font-size: 22px;
  color: #888;
}
.weui-tabbar.vux-demo-tabbar {
  /** backdrop-filter: blur(10px);
  background-color: none;
  background: rgba(247, 247, 250, 0.5);**/
}
.vux-demo-tabbar .weui-bar__item_on .demo-icon-22 {
  color: #F70968;
}
.vux-demo-tabbar .weui-tabbar_item.weui-bar__item_on .vux-demo-tabbar-icon-home {
  color: rgb(53, 73, 94);
}
.demo-icon-22:before {
  content: attr(icon);
}
.vux-demo-tabbar-component {
  background-color: #F70968;
  color: #fff;
  border-radius: 7px;
  padding: 0 4px;
  line-height: 14px;
}
.weui-tabbar__icon + .weui-tabbar__label {
  margin-top: 0!important;
}
.vux-demo-header-box {
  z-index: 100;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

@font-face {
  font-family: 'vux-demo';  /* project id 70323 */
  src: url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot');
  src: url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.woff') format('woff'),
  url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.ttf') format('truetype'),
  url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.svg#iconfont') format('svg');
}

.demo-icon {
  font-family: 'vux-demo';
  font-size: 20px;
  color: #04BE02;
}

.demo-icon-big {
  font-size: 28px;
}

.demo-icon:before {
  content: attr(icon);
}

.router-view {
  width: 100%;
  top: 46px;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  top: 46px;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.menu-title {
  color: #888;
}
</style>
